<template>
  <div>
    <el-table :data="tableData" :cell-class-name="tableStyleFun(tableStyle)" :cell-style="CellStyle2"
      :header-cell-style="headerCellStyle" :header-cell-class-name="headStyleFun(headerCellStyle)" style="width: 100%">
      <el-table-column v-for="(column, index) of columns" :key="index" :prop="column.prop" :label="column.label"
        :class-name="(column.prop == 'taskCount' && tableData[index] !== undefined && tableData[index].taskCount === '0') ? 'red' : ''"
        :fixed="column.fixed" :width="column.width">
      </el-table-column>
      <el-table-column v-if="edit" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button v-if="edit.view" @click="view(scope.row)" type="text" size="small">详情</el-button>
          <el-button v-if="edit.edit" @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="edit.delete" @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: 'GenericTable',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    titles: {
      type: Array, // 新增一个 titles 属性，用于存放列标题
      required: false, // titles 属性是可选的，如果未传入 titles 属性，则默认使用 columns 中的 label 属性作为列标题
    },
    tableStyle: { // 新增一个 tableStyle 属性，用于控制表格的样式
      type: String,
      required: false, // tableStyle 属性是可选的，如果未传入 tableStyle 属性，则默认使用默认样式
    },
    headerCellStyle: { // 新增一个 tableStyle 属性，用于控制表格的样式
      type: Object,
      required: false, // tableStyle 属性是可选的，如果未传入 tableStyle 属性，则默认使用默认样式
    },
    edit: {//是否显示操作列
      type: Object,
      required: false
    }
  },
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    // 定义一个计算属性 tableData，用于动态更新表格数据，使其与传入的 data 属性保持同步
    tableData() {
      return this.data.map((item) => {
        return this.columns.reduce((result, column) => {
          result[column.prop] = item[column.prop];
          return result;
        }, {});
      });
    },
  },
  mounted() {
    console.log('edit', this.edit)
  },
  methods: {
    headerCellStyle2() {
      return "text-align: center;"
    },
    CellStyle2() {
      return "text-align: center;"
    },
    view(row) {//在父组件中写方法具体实现
      this.$parent.view(row)
    },
    editRow(row) {
      this.$parent.editRow(row)
    },
    deleteItem(row) {
      this.$parent.deleteItem(row)
    },
    approveTable(row) {
      this.$parent.approveTable(row)
    },
    submitTable(row) {
      this.$parent.submitTable(row)
    },
    headStyleFun(nowTableStyle) {
      if (nowTableStyle == 'projectOverView') {
        return "projectOverViewHead"
      } else {
        return "overViewHead"
      }
    },
    canEdit(statusName) {
      let editFlag = false
      switch (statusName) {
        case '待审批':
          break;
        case '审批中':
          // case 2的代码块
          break;
        case '进行中':
          // case N的代码块
          break;
        default:
        // default的代码块
      }

    },
    tableStyleFun(nowTableStyle) {
      if (nowTableStyle == 'projectOverView') {
        return "projectOverViewCell"
      } else {
        return "overViewCell"
      }
    }
  }
};
</script>

<style lang="scss">
.overViewHead {
  background-color: #F5F7FA;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
  color: #666063;
  line-height: 22px;
}

.red {
  color: red;
}

.projectOverViewHead {
  background-color: #fafaf5;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
  line-height: 22px;
}

.overViewCell {
  text-align: center;
}

.projectOverViewCell {
  text-align: center;
}
</style>
